<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta name="author" content="PIXINVENT">
    <title>999后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
    <script src="app-assets/js/Dream.js"></script>
    <script src="app-assets/js/Http.js"></script>
</head>
<body>
<div class="content-wrapper">
    <div class="content-header ">
        <div class="content-header-left mb-2">
            <h3 class="content-header-title mb-0">商品分类管理</h3>
        </div>
    </div>
    <div class="card">
        <div class="card-content">
            <div class="card-body">
                <div class="searchbox">
                    <div class="form-inline">
                        <div class="form-group">
                            <input type="text" class="form-control" id="select-categoryName" placeholder="类别名称">
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="select-description" placeholder="类别描述">
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary" onclick="selects()">查询</button>
                        </div>
                    </div>
                </div>
                <div class="funcbtn clearfix">
                    <div class="pull-left"><a class="btn btn-info" href="#" data-toggle="modal" data-target="#myModal2"
                                              onclick="insertEm()">添加分类</a>
                    </div>
                </div>
                <div class="tablebox1">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>类别名称</th>
                            <th>类别描述</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="showT">
                        <tr>
                        </tr>

                        </tbody>
                    </table>

                    <div class="page clearfix">
                        <div class="pull-left">共 <span id="total"></span> 条记录 第 <span id="pageNum"></span> / <span
                                id="pages"></span> 页
                        </div>
                        <div class="pull-right">

                            <nav aria-label="..." class="pull-left">
                                <ul class="pagination" id="pageTo">

                                </ul>
                            </nav>
                            <div class="pull-left p-l-20"><a class="" href="#" onclick="pageTo()">跳至</a><input
                                    type="text" value="" class="form-control" id="pageNumber">页
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">分类信息</h4>
            </div>
            <div class="modal-body">
                <div class="form1 form2">
                    <ul class="row" id="upMod">
                        <li class="  col-xs-20"><span>ID：</span>
                            <input type="text" id="upd-categoryId" class="form-control">
                        </li>
                        <li class="col-xs-20"><span>类别名称：</span>
                            <input type="text" id="upd-categoryName" class="form-control">
                        </li>

                        <li class="col-xs-20"><span>类别描述：</span>
                            <input type="text" id="upd-description" class="form-control">
                        </li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="nToE" onclick="nToE()">保存</button>
            </div>
        </div>

    </div>
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">分类信息</h4>
            </div>
            <div class="modal-body">
                <div class="form1 form2">
                    <ul class="row" id="inMod">
                        <li class="col-xs-20"><span>类别名称：</span>
                            <input type="text" id="in-categoryName" class="form-control">
                        </li>

                        <li class="col-xs-20"><span>类别描述：</span>
                            <input type="text" id="in-description" class="form-control">
                        </li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="nToEm" onclick="nToEm()">保存</button>
            </div>
        </div>

    </div>
</div>


<script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
<script src="app-assets/js/app-menu.js" type="text/javascript"></script>
<script src="app-assets/js/app.js" type="text/javascript"></script>
<script src="app-assets/js/echarts.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $(".ewm").click(function () {
            $(this).toggleClass("active")
        });
        selectAll($('#select-categoryName').val(), $('#select-description').val(), 1)
    });

    function selectAll(categoryName, description, pageNum) {
        $.ajax({
            'url': HTTP.getUserInfo+'/categories',
            'type': 'get',
            'dataType': 'json',
            'data': {categoryName, description, pageNum},
            'success': selectAllSuccess
        })
    }

    function selects() {
        selectAll($('#select-categoryName').val(), $('#select-description').val(), 1)
    }

    function selectAllSuccess(data) {
        $('#showT tr').remove()

        data.data.list.forEach(dd => {
            let status = dd.deleteAt == null ? '<span class="text-primary">正常</span>' : '<span class="text-danger">删除</span>'
            $('#showT').append(`<tr>
                    <td>${dd.categoryId}</td>
                    <td>${dd.categoryName}</td>
                    <td>${dd.description}</td>
                    <td>` + status + `</td>
                    <td>
                        <div class="setbox">
                            <p>选择操作</p>
                            <div class="setlist">
                                <a href="转让.html" onclick="update(this)" data-toggle="modal" data-target="#myModal">修改</a>
                                <a href="#" onclick="deleteEm(this)">删除</a>
                            </div>
                        </div>
                    </td>
                </tr>`)
        })
        $('#total').html(data.data.total)
        $('#pageNum').html(data.data.pageNum)
        $('#pages').html(data.data.pages)
        $('#pageSize').html(data.data.pageSize)
        let upP = ''
        if (data.data.pageNum == 1) {
            upP = 'disabled'
        }
        let neP = ''
        if (data.data.pageNum == data.data.pages) {
            neP = 'disabled'
        }
        let pageTo = ''
        pageTo += `<li class="` + upP + `" onclick="upPage()"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>`
        for (let i = 1; i <= data.data.pages; i++) {
            if (i == data.data.pageNum) {
                pageTo += `<li class="active"><a href="#">${i} <span class="sr-only">(current)</span></a></li>`
            } else {
                pageTo += `<li><a href="#">${i}</a></li>`
            }
        }
        pageTo += `<li class="` + neP + `" onclick="nePage()"><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>`
        $('#pageTo').html(pageTo)

        $('#pageTo a').click(function () {
            let pageNum = $(this).html()
            selectAll($('#select-categoryName').val(), $('#select-description').val(), pageNum)
        })
    }

    function upPage() {
        let pageNum = $('#pageNum').html()
        pageNum--
        selectAll($('#select-categoryName').val(), $('#select-description').val(), pageNum)
    }

    function nePage() {
        let pageNum = $('#pageNum').html()
        pageNum++
        selectAll($('#select-categoryName').val(), $('#select-description').val(), pageNum)
    }

    function pageTo() {
        let pageNum = $('#pageNumber').val()
        selectAll($('#select-categoryName').val(), $('#select-description').val(), pageNum)
    }

    //修改
    function update(e) {
        let categoryId = $(e).parent().parent().parent().parent().find('td').eq(0).html()
        let categoryName = $(e).parent().parent().parent().parent().find('td').eq(1).html()
        let description = $(e).parent().parent().parent().parent().find('td').eq(2).html()
        $('#upd-categoryId').val(categoryId).attr('readonly', true)
        $('#upd-categoryName').val(categoryName)
        $('#upd-description').val(description)
    }

    function nToE() {
        let categoryId = $('#upd-categoryId').val()
        let categoryName = $('#upd-categoryName').val()
        let description = $('#upd-description').val()
        let updatedBy = sessionStorage.getItem("loginName")

        $.ajax({
            'url': HTTP.getUserInfo+'/categories',
            'type': 'put',
            'dataType': 'json',
            'contentType': 'application/json',
            'data': JSON.stringify({
                categoryId, categoryName, description,updatedBy
            }),
            'success': nToESuccess
        })
    }

    function nToESuccess(data) {
        if (data.code == 200) {
            Dreamer.success('修改成功', 1000);
            $('#myModal').modal('hide')
            $('#upd-categoryId').val('')
            $('#upd-categoryName').val('')
            $('#upd-description').val('')
            selectAll($('#select-categoryName').val(), $('#select-description').val(), 1)
        } else {
            Dreamer.error('修改失败', 1000);
        }
    }

    // 新增
    function insertEm() {
        $('#in-categoryName').val('')
        $('#in-description').val('')
    }

    function nToEm() {
        let categoryName = $('#in-categoryName').val()
        let description = $('#in-description').val()
        let createdBy = sessionStorage.getItem("loginName")
        let updatedBy = sessionStorage.getItem("loginName")

        $.ajax({
            'url': HTTP.getUserInfo+'/categories',
            'type': 'post',
            'dataType': 'json',
            'contentType': 'application/json',
            'data': JSON.stringify({
                categoryName ,description , createdBy, updatedBy
            }),
            'success': nToEmSuccess
        })
    }

    function nToEmSuccess(data) {
        if (data.code == 200) {
            Dreamer.success('新增成功', 1000);
            $('#myModal2').modal('hide')
            $('#in-categoryName').val('')
            $('#in-description').val('')
            selectAll($('#select-categoryName').val(), $('#select-description').val(), 1)
        } else {
            Dreamer.error('新增失败', 1000);
        }
    }

    function deleteEm(e) {
        //获取ID
        let categoriesId =  $(e).parent().parent().parent().parent().find('td').eq(0).html()
        $.ajax({
            'url': HTTP.getUserInfo+'/categories/' + categoriesId,
            'type': 'delete',
            'dataType': 'json',
            'success': deleteEmSuccess
        })
    }

    function deleteEmSuccess(data) {
        if (data.code == 200) {
            Dreamer.success('删除成功', 1000);
            selectAll($('#select-categoryName').val(), $('#select-description').val(), 1)
        } else {
            Dreamer.error('删除失败', 1000);
        }
    }

</script>
</body>
</html>